<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <user-info :user="zs"></user-info>
      <user-info :user="ls"></user-info>
      <user-info :user="ww"></user-info>
      <user-info></user-info>
    </div>

    <script src="../vue.js"></script>
    <!-- <script src="./UserInfo.js"></script> -->
    <script>
      Vue.component('UserInfo', {
        // 通过 props 接收父组件传递下来的数据

        // 数组形式：没有办法设置默认值和类型以及更精确的控制
        // props: ['user'],

        // 对象形式（推荐）：
        props: {
          // user 为属性名
          user: {
            // 属性值类型
            type: Object,
            // 默认值，为什么要用函数，类型组件的data选项
            default: () => ({ id: 1, name: 'zs', age: 18, gender: '男' }),
          },
        },
        template: `
          <div>
            用户ID：{{ user.id }}
            <br>
            用户名：{{ user.name }}
            <br>
            性别：{{ user.gender }}
            <br>
            年龄：{{ user.age }}
          </div>
        `,
      });

      new Vue({
        el: '#app',
        data: {
          zs: { id: 1, name: '张三', age: 18, gender: '男1' },
          ls: { id: 2, name: '李四', age: 19, gender: '男2' },
          ww: { id: 3, name: '王五', age: 20, gender: '男3' },
        },
      });
    </script>
  </body>
</html>
